<template>
  <div class="cwatable">
    <!--顶部标题-->
    <div class="content-top">
      <span>统计</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/SandS/table">报表统计</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/SandS/rest">剩休查询</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/SandS/cwatable">考勤报表</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-content">
        <div class="default-tabs">
          <el-tabs
            v-model="activeName"
            type="card"
            mode="horizontal"
            @tab-click="loadData"
          >
            <el-tab-pane label="月统计报表" name="1" />
          </el-tabs>
          <div class="view-content">
            <div class="content-content-right">
              <!--月统计报表 MonthTable-->
              <div v-if="activeName == 1" class="monthTable">
                <div class="content-head">
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">部门：</span>
                    <span class="span-input fl">
                      <el-cascader
                        v-model="MonthTable.tableConfig.paramsTmp.selectWorker"
                        :options="allWorker"
                        :props="{checkStrictly: true}"
                        clearable
                      >
                      </el-cascader>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">日期：</span>
                    <span class="span-input fl">
                      <el-date-picker
                        v-model="MonthTable.tableConfig.paramsTmp.date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </span>
                  </div>
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button
                        type="primary"
                        @click="
                          () => {
                            FnSearch('MonthTable')
                          }
                        "
                        >查询</el-button
                      >
                    </span>
                  </div>
                  <div class="input-item fr">
                    <span class="span-input fl">
                      <!-- <el-button type="primary" @click="FnJump('/setting/monthtableconfig')">设置月统计报表列</el-button> -->
                    </span>
                  </div>
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :columns="MonthTable.tableConfig.columns"
                    :url="MonthTable.tableConfig.url"
                    :pparams="MonthTable.tableConfig.pparams"
                    @tableBubbling="MonthTableBubbling"
                  ></Table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Table from '@/components/table.vue'
import mixins from '@/const/mixins'
import {holiday} from '@/const/api'

export default {
  name: 'Cwatable',
  components: {
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      MonthTable: {
        isLoad: false, // 是否加载过该容器的数据
        params: {},
        tableConfig: {
          url: '/attendance/selectAttenence',
          columns: [
            {
              dataIndex: 'employeeVo.employeeName',
              title: '姓名',
            },
            {
              dataIndex: 'employeeNo',
              title: '工号',
            },
            {
              dataIndex: 'employeeVo.deptName',
              title: '部门名',
            },
            {
              dataIndex: 'employeeVo.phone',
              title: '手机',
            },
            {
              dataIndex: 'dayCount',
              title: '应记考勤天数',
            },
            {
              dataIndex: 'actrualHourCount',
              title: '打卡工时',
            },
            {
              dataIndex: 'actrualDayCount',
              title: '实际上班天数',
            },
            {
              dataIndex: 'absenteeismDay',
              title: '扣款天数',
            },
          ],
          params: {
            pageNum: 1,
            pageSize: 15,
          },
          pparams: {},
          paramsTmp: {
            date: null,
            selectWorker: [],
          },
        },
      },
      container: false,
      containerArr: ['MonthTable'],
      mask: {
        title: '',
        showMask: false,
        form: [
          {
            title: '类型',
            width: '',
            type: 'text',
            name: 'name',
            value: '',
            default: '',
            placeholder: '请填写类型',
            disabled: false,
            required: true,
          },
          {
            title: '备注',
            width: '',
            type: 'textarea',
            name: 'name',
            value: '',
            default: '',
            placeholder: '请填写备注',
            disabled: false,
            required: true,
            rows: 3,
          },
        ],
        width: '28%',
        btnLoading: false,
        deptIdOptions: [],
      },
      allWorker: [],
    }
  },
  watch: {
    tests: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      deep: true,
    },
  },
  created() {
    window._this = this

    this.getAllWorker() // 获取所以部门以及员工
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 根1据activeName加载对应tab数据
      let activeName = this.activeName
      let container = (this.container = this[
        this.containerArr[activeName * 1 - 1]
      ]) // 拿 tab con 进行操作
      let params = container.tableConfig.pparams
      let paramsTmp = container.tableConfig.paramsTmp
      container.tableConfig.pparams.startDay = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[0], '{y}-{m}-{d}')
        : null
      container.tableConfig.pparams.endDay = paramsTmp.date
        ? this.$utils.parseTime(paramsTmp.date[1], '{y}-{m}-{d}')
        : null
      if (activeName == 1 && !this.container.isLoad) {
        // 月统计报表
        paramsTmp.selectWorker.length == 1
          ? ((params.deptId = paramsTmp.selectWorker[0]),
            delete params.employeeNo)
          : ((params.deptId = paramsTmp.selectWorker[0]),
            (params.employeeNo = paramsTmp.selectWorker[1]))
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      }
    },
    FnSearch(key) {
      let container = this[key]
      container.isLoad = false
      container.tableConfig.params.pageNum = 1
      container.tableConfig.pparams = JSON.parse(
        JSON.stringify(container.tableConfig.params),
      )
      this.loadData()
    },
    MonthTableBubbling(e) {
      console.log(e, 'MonthTableTableBubbling')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask
    },
    FnJump(url) {
      this.$router.push(url)
    },
  },
}
</script>

<style lang="less">
.cwatable {
  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }

  .row-item {
    padding-bottom: 14px;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 190px !important;
    }

    & > div {
      margin-right: 14px;

      &:last-child {
        margin-right: 0;
      }
    }

    .el-upload-list--picture-card .el-upload-list__item-actions span + span {
      margin-left: 2px;
    }

    .el-upload--picture-card {
      width: 100px !important;
      height: 100px !important;
      line-height: 108px !important;
    }

    .el-upload-list__item {
      width: 100px !important;
      height: 100px !important;
      line-height: 50px !important;
    }

    .file-name {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .row-item-title {
    box-sizing: border-box;
    position: relative;
    padding-right: 5px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &::after {
      content: ':';
      font-weight: bold;
    }
  }
}

.el-picker-panel__footer {
  .el-button--text {
    display: none !important;
  }
}
</style>
